<template>
	<div :style="{marginTop: value.margin + 'px', padding: value.paddingy + 'px ' + value.paddingx + 'px', backgroundColor: value.bgcolor}">
		<div
			class="md-picwindow"
			:class="{'window': value.showType == 0, 'col col-2': value.showType == 1, 'col col-3': value.showType == 2, 'col col-4': value.showType == 3}"
			:style="{backgroundColor: value.bgcolor}"
		>
			<div class="md-picwindow-cell win-1">
				<img :src="value.lists[0].image || defaultSrc" />
			</div>
			<div class="md-picwindow-cell win-2">
				<img :src="value.lists[1].image || defaultSrc" />
			</div>
			<div class="md-picwindow-cell win-3">
				<img :src="value.lists[2].image || defaultSrc" />
			</div>
			<div class="md-picwindow-cell win-4" v-show="value.showType != 2">
				<img :src="value.lists[3].image || defaultSrc" />
			</div>
		</div>
	</div>
</template>

<script>
import defaultImage from '@/assets/default_full.png';
export default {
	name: 'picwindowContent',
	props: {
		value: Object
	},
	data() {
		return {
			defaultSrc: defaultImage
		}
	}
}
</script>

<style>
</style>